<template>
 <hmtable :list='list'>
     <template #thead>
      <th scope="col">#</th>
      <th scope="col">商品名称</th>
      <th scope="col">价格</th>
      <th scope="col">标签</th>
      <th scope="col">操作</th>
     </template>
     <template #tbody='{item:value,index}'>
        <th scope="row">{{index+1}}</th>
      <td>{{value.goods_name}}</td>
      <td>￥{{value.goods_price}}</td>
      <td>
          <input type="text" v-if="value.inputVisible" @blur="add(value)"  style="width:60px" v-myfocus v-model="useradd">
           <button type="button" class="btn btn-primary btn-sm" v-else @click="value.inputVisible=true">+tag</button>
           <span class="badge badge-warning" v-for="(item) in value.tags" :key='item' style='margin-left:5px'>{{item}}</span>
      </td>
      <td>
          <button type="button" class="btn btn-outline-danger" @click="del(value.id)">删除</button>
      </td>
     </template>
 </hmtable>
</template>

<script>
import {taksURL} from '../../../apis/taks.js'
import hmtable from './table'
import {myfocus} from '../../../units/02封装全局函数代替全局vue挂在.js'
export default {
    components: {
        hmtable
    },
    directives:{
        myfocus
    },
  data() {
    return {
        list:[],
        useradd:''
    };
  },
  mounted () {
    taksURL().then(res=>{
        this.list=res.data.data
        console.log(this.list);
    }).catch(err=>console.log(err))
},
methods: {
    add(value){
        value.inputVisible=false
        if(value.tags.indexOf(this.useradd)==-1){
            value.tags.unshift(this.useradd)
            this.useradd=''
        }
        
    },
    del(id){
        this.list=this.list.filter(v=>v.id!=id)
    }
}
};
</script>
<style lang='less' scoped>
</style>
